<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :is-back="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="10"
        :searchSize="10"
        :otherSize="-1"
        justify="space-between"
        :searchStyle="{height: '125px', backgroundColor: '#fff'}"
        :logoStyle="{fontSize: '100px'}"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <commodity-commented v-show="commented !== 0"></commodity-commented>
      <commodity-comment-add @release="commented = 1" v-show="commented === 0" :id="this.$route.query.id"></commodity-comment-add>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import NHeaderVue from "@/components/NHeader.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import SearchBarVue from "@/components/userInfo/SearchBar.vue";
import NToolSideVue from "@/components/NToolSide.vue";
import CommodityCommentAddVue from "@/components/order/CommodityCommentAdd.vue"
import CommodityCommentedVue from "@/components/order/CommodityCommented.vue";
import { isComment } from "@/api/comment";

export default {
  components: {
    NHeader: NHeaderVue,
    SearchBar: SearchBarVue,
    NSearchBar: NSearchBarVue,
    NToolSide: NToolSideVue,
    CommodityCommentAdd: CommodityCommentAddVue,
    CommodityCommented: CommodityCommentedVue
  },
  data() {
    return {
      commented: 0
    };
  },
  methods: {
    doIsComment() {
      isComment(this.$route.query.id).then(res => {
        this.commented = res
      })
    }
  },
  created() {
    this.doIsComment()
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}

.main {
  background-color: #f0f3ef;
  overflow: hidden;
  padding: 0;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  padding: 20px;
  font-size: 10px;
  border-right: 1px solid #f5f5f5;
  color: #666666;
}

.info:hover {
  color: #3271ae;
  cursor: pointer;
}
</style>